<template>
  <form id="form">
    <div class="formLine">
      <div class="formLineTitle">
        <span class="titlecontent">Email</span>
        
        <div v-if="form.email.errorclass" class="formtips flex">
          <img v-lazy="require('@/assets/img/icon/error.svg')" alt="" />
          {{ form.email.tips }}
        </div>

        <div v-show="form.email.noempty()" v-else class="formtips flex">
          <img v-lazy="require('@/assets/img/icon/correct.svg')" alt="" />
        </div>
      </div>
      <div class="formLineContent">
        <input
          type="text"
          autocomplete="off"
          :class="{ 'input-error': form.email.errorclass }"
          v-model="form.email.value"
          name="email"
          placeholder="752779816@qq.com"
        />
      </div>
    </div>

    <div class="formLine">
      <div class="formLineTitle">
        <span class="titlecontent">Name</span>
        <div v-if="form.name.errorclass" class="formtips flex">
          <img v-lazy="require('@/assets/img/icon/error.svg')" alt="" />
          {{ form.name.tips }}
        </div>

        <div v-show="form.name.noempty()" v-else class="formtips flex">
          <img v-lazy="require('@/assets/img/icon/correct.svg')" alt="" />
        </div>
      </div>

      <div class="formLineContent">
        <input
          type="text"
          autocomplete="off"
          :class="{ 'input-error': form.name.errorclass }"
          name="name"
          v-model="form.name.value"
          placeholder="Jack"
        />
      </div>
    </div>

    <div class="formLine">
      <div class="formLineTitle flex">
        <span class="titlecontent">Content</span>
        <div v-if="form.content.errorclass" class="formtips flex">
          <img v-lazy="require('@/assets/img/icon/error.svg')" alt="" />
          {{ form.content.tips }}
        </div>

        <div v-show="form.content.noempty()" v-else class="formtips flex">
          <img v-lazy="require('@/assets/img/icon/correct.svg')" alt="" />
        </div>
      </div>
      <div class="formLineContent">
        <textarea
          class="content"
          :class="{ 'input-error': form.content.errorclass }"
          name="content"
          v-model="form.content.value"
          rows="8"
          cols="50"
          maxlength="250"
          placeholder="Write your talk..."
        ></textarea>
      </div>
    </div>

    <div class="formLine flex-start">
      <el-popover placement="left-end" width="500" trigger="click">
        <Biaoqing></Biaoqing>
        <el-button slot="reference" size="medium"
          ><svg
            t="1635579427769"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4007"
            width="200"
            height="200"
          >
            <path
              d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z"
              p-id="4008"
            ></path>
            <path
              d="M807.273469 216.727043c-162.808016-162.836669-427.736874-162.836669-590.544891 0-162.836669 162.806993-162.836669 427.736874 0 590.543867 162.808016 162.837692 427.737898 162.837692 590.544891 0C970.110137 644.462894 970.110137 379.534036 807.273469 216.727043M764.893242 764.92036c-139.444912 139.443889-366.370225 139.414213-505.798764 0-139.459239-139.473565-139.459239-366.354875 0-505.827417 139.428539-139.429563 366.354875-139.460262 505.798764 0C904.336108 398.521482 904.336108 625.476471 764.893242 764.92036"
              p-id="4009"
            ></path>
            <path
              d="M381.724423 468.02137c24.783453 0 44.953841-20.169365 44.953841-44.967144 0-24.828478-20.170388-45.027519-44.953841-45.027519-24.842805 0-45.013193 20.199041-45.013193 45.027519C336.71123 447.852004 356.881618 468.02137 381.724423 468.02137"
              p-id="4010"
            ></path>
            <path
              d="M640.680243 468.095048c24.812105 0 45.010123-20.213367 45.010123-45.01217 0-24.827455-20.198018-44.99682-45.010123-44.99682-24.785499 0-44.953841 20.169365-44.953841 44.99682C595.726401 447.88168 615.894743 468.095048 640.680243 468.095048"
              p-id="4011"
            ></path>
            <path
              d="M642.245901 619.058294l-2.453888 0.798179c-40.310078 18.248619-83.548858 27.5341-128.411625 27.5341-46.343491 0-90.173742-9.375531-130.305765-27.799136l-2.425236-0.741897c-1.508353-0.413416-3.548826-1.003863-6.092765-1.003863-14.757099 0-26.734898 11.977799-26.734898 26.675546 0 6.978948 3.282766 13.988596 8.695033 19.253506l-0.325411 1.62501 6.831592 3.076058c47.911196 21.679765 100.021018 33.095769 150.681838 33.095769 51.608402 0 102.180194-11.120268 150.978597-33.361829 8.575306-4.703115 13.928221-13.721513 13.928221-23.511483C676.611593 627.458615 661.027663 613.290941 642.245901 619.058294"
              p-id="4012"
            ></path>
          </svg>
        </el-button>
      </el-popover>

      <el-button style="position: absolute; right: 2.5%" id="btn">
        <i class="el-icon-loading" v-show="!iconif"></i>
        <i class="el-icon-finished" v-show="iconif"></i> Submit
      </el-button>
    </div>
  </form>
</template>

<script>
import Biaoqing from "./biaoqing/biaoqing.vue";
import { DeBounce } from "@/assets/js/DeBounce";
import Bus from "@/assets/js/bus.js";
import { httpGet, httpPost } from "@/network/request.js";
import { GetTime } from "@/assets/js/GetTime.js";

export default {
  name: "messageform",
  data() {
    return {
      Showinbarrage: true,
      iconif: true,
      //自定义表单验证功能
      form: {
        email: {
          //v-model对应的值
          value: "",
          //最大输入长度
          maxlength: 30,
          //最小输入长度
          minlength: 5,
          //状态，有empty,error,correct三个值
          state: "empty",
          //是否绑定错误类
          errorclass: false,
          //为空信息
          emptyinfo: "Please input email",
          //错误信息
          errorinfo: "Please input correct email",
          //提示信息
          tips: "",
          //输入的类型限定
          type: "numberenglish",
          //验证事件
          event: "input",
          //验证方法
          validator: function () {
            let patt = /\b[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,6}\b/g;
            if (this.value != "") {
              if (patt.test(this.value)) {
                return "correct";
              } else {
                return "error";
              }
            } else {
              return "empty";
            }
          },
          noempty: function () {
            if (this.state != "empty") {
              return true;
            } else {
              return false;
            }
          },
        },
        name: {
          value: "",
          maxlength: 10,
          minlength: 1,
          state: "empty",
          errorclass: false,
          emptyinfo: "Please input name",
          errorinfo: "Please input correct name",
          tips: "",
          type: "string",
          event: "input",
          validator: function () {
            if (this.value != "") {
              return "correct";
            } else {
              return "empty";
            }
          },
          noempty: function () {
            if (this.state != "empty") {
              return true;
            } else {
              return false;
            }
          },
        },
        content: {
          value: "",
          maxlength: 250,
          minlength: 1,
          state: "empty",
          errorclass: false,
          emptyinfo: "Please input content",
          errorinfo: "Please input correct content",
          tips: "",
          type: "string",
          event: "input",
          validator: function () {
            if (this.value != "") {
              return "correct";
            } else {
              return "empty";
            }
          },
          noempty: function () {
            if (this.state != "empty") {
              return true;
            } else {
              return false;
            }
          },
        },
      },
    };
  },
  methods: {
    Submit() {
      const context = this;
      (() => {
        context.iconif = false;
        if (context.btnstates) {
          success(context);
        } else {
          let info = new Map();
          for (let i in context.form) {
            let infos = context.ValidationSet(context.form[i]);
            info.set(`${i}`, infos);
          }
          if (context.btnstates) {
            success(context);
          } else {
            fail(context, info);
          }
        }
      })();

      function success(context) {
        httpPost({
          url: "/messageboard/form",
          data: {
            email: context.form.email.value,
            time: GetTime(),
            name: context.form.name.value,
            content: context.form.content.value,
            speed: Math.floor(Math.random() * 3000 + 7000),
          },
        })
          .then((res) => {
            context.iconif = true;
            context.ClearForm();
            Bus.$emit("success", res.data);
          })
          .catch((error) => {
            context.iconif = true;
            Bus.$emit("error", error);
          });
      }

      function fail(context, info) {
        context.iconif = true;
      }
    },
    ValidationSet(form) {
      let errinfo = new Map();
      let context = this;
      let jsdef = /<script[^>]*?>.*?<\/script>/g;
      let sqldef = /\w*((\%27)|(\’))((\%6F)|o|(\%4F))((\%72)|r|(\%52))/g;

      function jsdefs(context) {
        //判断成功则返回结果，不成功则添加错误信息和结果
        if (!jsdef.test(form.value)) {
          return true;
        } else {
          errinfo.set("jsdef", "jsdef is fail");
          return false;
        }
      }

      function sqldefs(context) {
        if (!sqldef.test(form.value)) {
          return true;
        } else {
          errinfo.set("sqldef", "sqldef is fail");
          return false;
        }
      }

      function yanzheng(context) {
        switch (form.validator()) {
          case "correct":
            form.state = "correct";
            form.errorclass = false;
            return true;
          case "empty":
            form.state = "empty";
            errinfo.set("validator", "null");
            form.errorclass = true;
            form.tips = form.emptyinfo;
            return false;
          case "error":
            form.state = "error";
            errinfo.set("validator", "validator is fail");
            form.errorclass = true;
            form.tips = form.errorinfo;
            return false;
        }
      }

      if (yanzheng(context) && jsdefs(context) && sqldefs(context)) {
        return true;
      } else {
        return errinfo;
      }
    },
    BindEvent() {
      for (let i in this.form) {
        document
          .getElementsByName(`${i}`)[0]
          .addEventListener(`${this.form[i].event}`, () => {
            this.ValidationSet(this.form[i]);
          });
      }
    },
    ClearForm() {
      for (let i in this.form) {
        this.form[i].value = "";
        this.form[i].state = "empty";
      }
    },
  },
  components: {
    Biaoqing,
  },
  created() {
    //发送当前选中的表情
    Bus.$on("Biaoqing", (data) => {
      this.form.content.value = this.form.content.value + data;
    });
  },
  mounted() {
    document
      .getElementById("btn")
      .addEventListener("click", DeBounce(this.Submit, 1000, true));
    this.BindEvent();
  },
  computed: {
    //返回submit按钮的状态
    btnstates() {
      let state = false;
      for (let i in this.form) {
        if (this.form[i].state == "correct") {
          state = true;
        } else {
          state = false;
          break;
        }
      }
      return state;
    },
  },
};
</script>

<style lang="scss" scoped>
#form {
  width: 50%;
  height: 100%;
  letter-spacing: 0.1rem;
  /* font-feature-settings: "ss02" on,"ss01" on; */
}

.formLine {
  width: 95%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  margin-bottom: 10px;
  position: relative;
}
.formLineTitle {
  text-align: right;
  color: $color-normal-blue;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0px;
  font-family: "agency fb";
}
.formLineContent {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 15px;
}
input,
textarea {
  width: 98%;
  padding-left: 2%;
  outline: none;
  border: none;
  height: 25px;
  border-radius: 3px;
  transition: all 0.3s ease;
  font-size: 0.7rem;
  border: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.input-error {
}
textarea {
  padding-top: 10px;
  font-family: "Alliance No.1", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-feature-settings: "ss02" on, "ss01" on;
  line-height: 1.1rem;
  list-style: none;
}
input:focus {
  box-shadow: 0px 0px 5px white;
  background-color: rgb(232, 240, 254) !important;
}
textarea:focus {
  box-shadow: 0px 0px 5px white;
  background-color: rgb(232, 240, 254) !important;
}
.content {
  height: 180px;
}

button svg {
  width: 16px;
  height: 16px;
}
.formtips {
  margin-left: 20px;
  color: #950909fa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  z-index: 1;
  transition:all .3s ease;
}
.formtips img {
  width: 20px;
  margin-right: 5px;
}
.titlecontent {
  width: 60px;
  text-align: left;
}
</style>